
<template>
  <div class="dynamic_form_item" >
    <a-form-item :name="props.question.key">
      <template v-slot:label >
        <label for="">{{ props.question.label }}</label>
        <a-tooltip  v-if="props.question.state.tipText" :key="props.question.label" :title="props.question.state.tipText" >
          <i class="iconfont" :style="{ marginLeft: '8px' }" :class="props.question.state.tipIconClassName"></i>
        </a-tooltip>
      </template>
      <template v-if="props.config.isView">
        <span>{{ props.question.value ? dayjs(props.question.value).format( 'YYYY-MM-DD'):'' }}</span>
      </template>
      <template v-else>
        <!-- <template v-if="props.question.state.keySplit">
          <a-date-picker
            style="margin-right:15px;"
            v-model="props.question.value[0]"
            value-format="timestamp"
            :picker="props.question.state.picker || ''"
            :type="props.question.state.name || 'date'"
            :disabled="props.question.disabled"
            placeholder="选择开始日期"
          ></a-date-picker>
          <a-date-picker
            v-model="props.question.value[1]"
            :picker="props.question.state.picker || ''"
            value-format="timestamp"
            :type="props.question.state.name || 'date'"
            :disabled="props.question.disabled"
            placeholder="选择结束日期"
          ></a-date-picker>
        </template> -->
        <!-- 单独选择 -->
        <template v-if="props.question.type === 'alone'">
          <a-date-picker
            v-model:value="props.question.value"
            :disabled="props.question.disabled"
            :show-time="props.question.state.showTime"
            :disabled-date="props.question.state.disabledDate"
            :picker="props.question.state.picker || 'date'"
            :format="props.question.state.format"
            :placement="props.question.state?.placement || 'bottomLeft'"
            :valueFormat="props.question.state.valueFormat || 'YYYY-MM-DD'"
            @change="change"
          ></a-date-picker>
        </template>
        <template v-else-if="props.question.type === 'time'">
          <a-time-picker
            @change="change"
            :show-time="props.question.state.showTime"
            v-model:value="props.question.value"
            :disabled="props.question.disabled"
            :format="props.question.state.format"
            :placement="props.question.state?.placement || 'bottomLeft'"
            :valueFormat="props.question.state.valueFormat || 'HH:mm:ss'"
          />
        </template>
        <template v-else-if="props.question.type === 'timeRange'">
          <a-time-range-picker
            @change="change"
            :show-time="props.question.state.showTime"
            v-model:value="props.question.value"
            :disabled="props.question.disabled"
            :format="props.question.state.format"
            :placement="props.question.state?.placement || 'bottomLeft'"
            :valueFormat="props.question.state.valueFormat || 'HH:mm:ss'"
          />
        </template>
        <template v-else>
          <a-range-picker
            ref="picker"
            v-model:value="props.question.value"
            :disabled="props.question.disabled"
            :disabled-date="props.question.state.disabledDate"
            :placeholder="['开始日期', '结束日期']"
            :show-time="props.question.state.showTime"
            :ranges="props.question.state.ranges || {}"
            :picker="props.question.state.picker || 'date'"
            :format="props.question.state.format"
            :placement="props.question.state?.placement || 'bottomLeft'"
            :valueFormat="props.question.state.valueFormat || 'YYYY-MM-DD'"
            @change="change"
          ></a-range-picker>
        </template>
      </template>
    </a-form-item>
  </div>
</template>

<script setup lang="ts">
import { watch,getCurrentInstance,onMounted,onUnmounted} from "vue";
import { QuestionBase } from "../../../question-base";
import dayjs, { Dayjs } from 'dayjs'
import { TIMESERVE } from "@/mixins/subject/subject-types";

//subject变量

const { proxy  }:any = getCurrentInstance()
let props = defineProps<{ question: QuestionBase<any>,formData:any,config?:any;}>();
const emit = defineEmits([ "update:formData"]);
watch(()=>props.question.value, (val)=>{
    emit('update:formData', val);
},{ flush:'sync' })

onMounted(() => {

  if( Array.isArray(props.question.value)  ){
    props.question.value.map((data)=>dayjs.unix(data).format(props.question.state.format || 'YYYY-MM-DD HH:mm:ss'))
    
  }
})

const change = ()=>{
  proxy.$NotificationFormSub.pushParams({
    key: TIMESERVE,
    value: {
      key: props.question.key,
      value: props.question.value,
    }
  });
}


</script>

<style lang="less" scoped>
@import url('./input-time.component.less');
</style>
